<template>
  <div class="learning-analytics-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1>学习分析</h1>
        <p>了解你的学习习惯，优化学习效果</p>
      </div>

    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="8" animated />
    </div>

    <!-- 学习分析仪表板 -->
    <div v-else>
      <ProgressDashboard />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

import ProgressDashboard from '@/components/learning/ProgressDashboard.vue'

// 响应式数据
const loading = ref(false)


</script>

<style scoped>
.learning-analytics-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.page-header {
  background: #fff;
  padding: 24px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.header-content p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.loading-container {
  padding: 24px;
  background: #fff;
  margin: 20px;
  border-radius: 8px;
}
</style>




